<template>
  <div class="home">
    <button @click="sort">价格排序{{ flag ? "^" : "v" }}</button>
    <ul class="list">
      <li v-for="item in list" :key="item._id" @click="gotodetail(item)">
        <img :src="item.pic" alt="" />
        <h5>{{ item.title }}</h5>
        <h5>价格是:{{ item.price }}</h5>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      flag: true,
    };
  },
  created() {
    this.$axios.get("list.json").then((res) => {
      console.log(res);
      //一定要打印 打印的目的是知道是xx.xx
      this.list = res.data.result;
    });
  },
  // 在实例创建之后(也就是进入页面之后)会自动执行
  methods: {
    sort() {
      if (this.flag == true) {
        this.list.sort((a, b) => {
          return a.price - b.price;
        });
      } else {
        this.list.sort((a, b) => {
          return b.price - a.price;
        });
      }
      this.flag = !this.flag;
    },
    gotodetail(item) {
      // this.$router.push({ path: "/detail", query: { obj: item } });
      this.$router.push({ name: "Detail", params: { obj: item } });
    },
    //编程式导航 通过js方法进行路由的跳转
    // this.$router是vue自带的对象，意思是路由对象，push方法代表把路径变成谁
  },
};
</script>
<style lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: #ccc;

  li {
    width: 45%;
    background: #fff;
    border-radius: 5px;
    margin-top: 30px;
    padding-top: 7px;
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
